<template>
    <div>
      <h1>房型添加</h1>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td align="right">房型名称</td>
            <td>
              <input type="text" v-model="query.typeName"/>
            </td>
          </tr>
          <tr>
            <td align="right">门市价</td>
            <td>
              <input type="text" v-model="query.price"/>
            </td>
          </tr>
          <tr>
            <td align="right">可住人数</td>
            <td>
              <input type="number" min="1" v-model="query.peopleNumber"/>
            </td>
          </tr>
          <tr>
            <td align="right">是否加床</td>
            <td>
              <input type="radio" name="isbed" value="不可加床" v-model="query.isBed"/>不可加床
              <input type="radio" name="isbed" value="免费加床" v-model="query.isBed"/>免费加床
              <input type="radio" name="isbed" value="收费加床" v-model="query.isBed"/>收费加床
              <input type="radio" name="isbed" value="自定义" v-model="query.isBed"/>自定义
            </td>
          </tr>
          <tr>
            <td align="right">房型图片</td>
            <td>
              <input type="file" @change="Img"/>
              <img :src="query.typeImg" width="100px" height="70px" v-if="query.typeImg!=''"/>
            </td>
          </tr>
          <tr>
            <td align="right">房型介绍</td>
            <td>
              <textarea v-model="query.desc"></textarea>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <input type="button" value="添加" class="btn btn-primary" @click="ok"/>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();

let query:any=reactive
({
  "typeName": "",
  "price": "",
  "peopleNumber": "",
  "isBed":"",
  "typeImg": "",
  "desc": ""
})
//上传图片
const Img=(e:any)=>
{
   console.log(e);
   let f=e.target.files[0];
   let obj=new FormData();
   obj.append('file',f);
   axios
   ({
       url:'/api/Type/Img',
       method:"post",
       data:obj
   })
   .then(res=>{
       if(res.data=="不是图片")
      {
         alert("您上传的不是图片");
         return;
      }   
      if(res.data=="图片大于2M")
      {
        alert("图片不能大于2M");
        return;
      }
      query.typeImg=res.data;
   })
}

const ok=()=>
{
  if(query.typeName=="")
  {
    alert("房型名称不能为空");
    return;
  }
  if(query.price=="")
  {
    alert("门市价不能为空");
    return;
  }
  if(query.peopleNumber=="")
  {
    alert("可住人数不能为空");
    return;
  }
  if(query.typeImg=="")
  {
    alert("图片不能为空");
    return;
  }
  if(query.desc=="")
  {
    alert("房型介绍不能为空");
    return;
  }
  axios
  ({
    url:'/api/Type/TypeAdd',
    method:'post',
    data:query
  })
  .then(res=>{
    if(res.data==-1)
    {
      alert("房型名称重复");
      return;
    }
    if(res.data>0)
    {
      alert("添加成功");
      router.push('/typeList');
      return;
    }
    else
    {
      alert("添加失败");
      return;
    }
  })
  .catch(err=>{

  })
}


</script>

<style scoped>

</style>